<template>
    <div class="container">
        <div class="content">
            <div class="image">
                <h1 class="title">{{ props.title }}</h1>
                <img :src="props.imgsrc" class="insert-img">
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="TitleBox">
    const props = defineProps({
        title:{
            type:String,
            required: true
        },
        imgsrc:{
            type: String,
            required: true
        }
    })
</script>

<style scoped lang="scss">
    .container{
        width: 100%;
        height: 26vw;
        display: flex;
        justify-content: center;
        .content{
            flex: 0 0 100%;
            position: relative;
            z-index: 10;
            width: 100%;
            padding: 4vw 0;
            .image{
                border-radius: 1.0417vw;
                width: 100%;
                height: 17.7083vw;
                background-color: aqua;
                background-color: black;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
                .title{
                    font-size: 5.2083vw;
                    letter-spacing: -0.244rem;
                    font-weight: 530;
                    line-height: 1.2;
                    padding-left: 1.5104vw;
                    padding-top: .8333vw;
                    padding-bottom: 1.25vw;
                    color: #fff;
                }
                .img-insert{
                    display: inline-block;
                    height: auto;
                    max-width: 100%;
                    vertical-align: middle;
                }
            }
        }
    }
</style>